<template>
  <div>
    <h1>父组件</h1>
    <ul>
      <li @click="count++">{{ count }}</li>
    </ul>
    <hr />
    <Child :count="count" @change-count="changeCount" :obj="obj" />
  </div>
</template>

<script>
import Child from './components/子组件.vue'
/**
 * 父子通信
 * 1. 父传子=》和vue2用法基本一样，只不过setup函数中需要通过函数的第一个参数props接收父传子数据
 * 2. 子传父=> 1. 父组件定义自定义事件和回调函数 2. 子组件通过this.$emit('自定义事件名字',data)
 *    变化：子组件触发父组件自定义事件，需要通过setup函数第二个参数获取（vue2 this.$emit）context.emit
 */
import { ref } from 'vue'
export default {
  components: {
    Child
  },
  setup () {
    const count = ref(0)
    const obj = ref({ a: 1 })
    const add = () => {
      count.value++
    }
    // 子改父的回调函数
    /**
     * data 子组件传递的数据
     */
    const changeCount = (data) => {
      count.value = data
    }
    return { count, add, obj, changeCount }
  }
}
</script>

<style lang="scss" scoped>
</style>
